<template>
  <div class="container">
    <!-- 顶部 -->
    <div class="top">
      <div class="back2" @click="goBack"></div>

      <div class="title">购物车</div>

      <div class="change" @click="bianji" v-if="booles">编辑</div>
      <div class="change" v-if="!booles" @click="bianji">完成</div>
    </div>

    <div class="main">
      <!-- 清空购物车 -->
      <div class="emptybox" v-if="!shopData.length">
        <img src="../assets/img/ic_empty_content.9efeb7f.png" alt="" />

        <h6>购物车里空荡荡的~</h6>
      </div>
      <div class="box" v-for="(item, index) in shopData" :key="index">
        <!-- 选框 -->
        <!-- <input type="checkbox"> -->
        <van-checkbox v-model="item.bannerData.check"></van-checkbox>

        <!-- 内容 -->
        <div class="content">
          <div class="left">
            <img :src="item.bannerData.img" alt="" />
          </div>

          <div class="right">
            <h6>{{ item.bannerData.title }}</h6>

            <span>x{{ item.bannerData.num }}</span>

            <div class="text">
              ￥{{ item.bannerData.disprice }}
              <div class="addDec">
                <div
                  class="tli-r"
                  @click="
                    item.bannerData.num == 1
                      ? item.bannerData.num
                      : item.bannerData.num--
                  "
                >
                  -
                </div>
                <div class="tli-num">{{ item.bannerData.num }}</div>
                <div class="tli-a" @click="item.bannerData.num++">+</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提交商品 -->
    <div v-if="shopData.length">
      <div class="total" v-if="booles">
        <van-submit-bar
          :price="total * 100"
          button-text="提交订单"
          @submit="onSubmit(total)"
        >
          <van-checkbox v-model="allcheck">全选</van-checkbox>
        </van-submit-bar>
      </div>

      <div class="total2" v-if="!booles">
        <van-submit-bar button-text="删除" @submit="del">
          <van-checkbox v-model="allcheck">全选</van-checkbox>
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { Toast } from "vant";
import "vant/es/toast/style";
import { useRouter } from "vue-router";
import { reactive, ref, toRefs } from "@vue/reactivity";
import { computed } from "vue";

export default {
  setup() {
    // 价格
    let price = ref(5050);
    let router = useRouter();
    let store = useStore();
    // 商品的数量
    let num = ref(1);
    // 返回上一级
    let goBack = () => {
      router.push({
        path: "/book",
      });
    };
    // 编辑与完成
    let booles = ref(true);
    let bianji = () => {
      booles.value = !booles.value;
      // console.log(booles.value);
    };
    // 新建一个空数组来接收请求的数据
    let data = reactive({
      shopData: [],
    });
    // 获取数据
    let getData = () => {
      data.shopData = store.state.shoppingCar;
      data.shopData.forEach((item, index) => {
        data.shopData[index].bannerData["check"] = false;
        data.shopData[index].bannerData["num"] = 1;
        // console.log(item);
      });
    };
    getData();
    // 点击确认支付
    const onSubmit = (money) => {
      //请选择商品判断是否勾选商品
      let havegoods = data.shopData.every((item) => {
        //是否全为false，若没有一个沟的话就是true
        return item.bannerData.check == false;
      });
      //若没有一个沟的话就是true
      if (havegoods) {
        Toast("请勾选商品");
      } else {
        // console.log(havegoods);
        Toast("提交成功");
        router.push({
          path: "/settlement",
        });
        //保存总价格
        window.localStorage.setItem("allmoney", JSON.stringify(money*100/100));

        //执行功能
        store.commit("readyCarData")
      }
    };

    //全选按钮
    const allcheck = computed({
      set: (v) => {
        data.shopData.forEach((item) => {
          item.bannerData.check = v;
        });
      },
      get: () => {
        return data.shopData.every((item) => {
          return item.bannerData.check == true;
        });
      },
    });

    // 计算总价格
    let total = computed(() => {
      return data.shopData.reduce((total, item) => {
        // console.log(total);
        if (item.bannerData.check) {
          return (total += item.bannerData.disprice * item.bannerData.num);
        } else {
          return total;
        }
      }, 0);
    });

    // 删除
    let del = () => {
      store.commit("del");

      getData();
    };
    return {
      goBack,
      ...toRefs(data),
      num,
      onSubmit,
      allcheck,
      price,
      total,
      booles,
      bianji,
      del,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/css/base.css";

.container {
  padding: 0px 15px;

  .top {
    display: flex;
    align-items: center;

    .back2 {
      width: 6%;
      height: 52px;
      background-image: url(../assets/img/back.eb96d29.png);
      background-repeat: no-repeat;
      background-size: 23px 23px;
      background-position: 0px 15px;
    }

    .title {
      flex: 1;
      height: 52px;
      line-height: 52px;
      text-align: center;
      font-size: 17px;
      font-weight: bolder;
    }

    .change {
      font-size: 17px;
      color: #212530;
      height: 52px;
      line-height: 52px;
    }
  }
}

.main {
  padding-bottom: 60px;

  .emptybox {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;

    img {
      width: 150px;
      height: 150px;
    }

    h6 {
      color: #7d7d7d;
      font-weight: normal;
    }
  }
}

.main .box {
  display: flex;
  margin-bottom: 10px;
}

.main .box .content {
  display: flex;
  flex: 1;
  height: 135px;
  background-color: #f7f7f9;
  border-radius: 6px;
  margin-left: 6px;
  padding-bottom: 10px;
}

.main .box .content .left {
  display: flex;
  width: 90px;
  height: 116px;
  margin-right: 14px;
  height: 135px;
  align-items: center;
}

.main .box .content .left img {
  width: 90px;
  height: 116px;
}

.main .box .content .right {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-evenly;
}

.main .box .content .right > h6 {
  color: #2f2526;

  font-size: 14px;
  font-weight: bold;
}

.main .box .content .right span {
  color: #c1c2c4;
  font-size: 12px;
  display: block;
  height: 29px;
  line-height: 29px;
}

.main .box .content .right .text {
  color: #142b3d;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.main .box .content .right .text .addDec {
  display: flex;
  border: 1px solid #e3e4e6;
  border-radius: 2px;
  width: 40%;
  margin-right: 10px;
}

.main .box .content .right .text .addDec .tli-r {
  width: 25%;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-right: 1px solid #e3e4e6;
}

.main .box .content .right .text .addDec .tli-num {
  flex: 1;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
}

.main .box .content .right .text .addDec .tli-a {
  width: 25%;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-left: 1px solid #e3e4e6;
}

::v-deep .van-submit-bar__bar {
  justify-content: space-between;
}
.total2
  ::v-deep
  button.van-button.van-button--danger.van-button--normal.van-button--round.van-submit-bar__button.van-submit-bar__button--danger {
  background: #fff;
  border: 1px solid red;
}
.total2 ::v-deep .van-button--danger {
  color: red;
}
.van-submit-bar ::v-deep .van-submit-bar__bar {
  height: 55px;
}
::v-deep .van-button--round {
  border-radius: 5px;
}
::v-deep .van-submit-bar__button {
  width: 95px;
}
::v-deep .van-button--normal {
  font-size: 16px;
  font-weight: bold;
}
::v-deep .van-submit-bar__text {
  font-size: 15px;
  color: #212028;
  font-weight: bold;
  padding-right: 30px;
}
::v-deep .van-submit-bar__price {
  font-size: 18px;
  color: #212028;
  font-weight: bold;
}
::v-deep .van-checkbox__label {
  color: #8b8e93;
}
::v-deep .van-submit-bar {
  box-shadow: 0px -2px 10px 0px #c1c2c4;
}
::v-deep .van-submit-bar__bar {
  justify-content: space-between;
}
</style>